<template>
	<view class="technician-page">
		<view class="uv-list-box flex-grow-1">
			<scroll-view @refresherrefresh="onRefresh" :scroll-top="scrollTop" scroll-y="true" class="scroll-Y"
				@scrolltolower="lower" @scroll="scroll" @refresherpulling="onPulling" :refresher-enabled="true"
				:refresher-triggered="triggered">
				<view class="TechnicianService-list">
					<TechnicianServiceItem :type="2" v-for="item in dataList" :item="item" :key="item" @onChang="select" />
				</view>
				<uv-loading-icon v-if="isLoading"></uv-loading-icon>
				<view class="noInfo" v-if="isMore">
					没有更多数据啦~
				</view>
			</scroll-view>
		</view>
		<view class="footselect" @click="confirm" v-if="userName">确定（已选择：{{userName}}）</view>
	</view>
</template>

<script>
	import TechnicianServiceItem from '@/components/TechnicianService-item/TechnicianService-item.vue'
	export default {
		components: {
			TechnicianServiceItem
		},
		data() {
			return {
				scrollTop: 0,
				triggered: false,
				freshing: true,
				list: [{
					name: '全部',
				}, {
					name: '足疗服务',
				}, {
					name: '理疗服务 '
				}],
				show: false,
				isShowtwoclass: false,
				pageSize: 10,
				pageNum: 1,
				total: 0,
				dataList: [],
				isLoading: false,
				hasNext: true,
				isMore: false,
				serviceId:null,
				placeOrder:null,
				userId:null,
				userName:null,
			}
		},
		onLoad(option) {
			//option 上个页面传递的参数。
			this.placeOrder = this.$store.state.placeOrder
			this.serviceId=option.serviceId
			this.getdata()
		},
		onShow() {
				uni.hideTabBar();
		},
		methods: {
			getdata() {
				this.pageNum = 1
				this.dataList = []
				this.getList()
				this.hasNext = true
			},
			confirm(){
				this.$store.dispatch('saveData', {
					field: 'placeOrder',
					value:{
					...this.$store.state.placeOrder,
					userId:this.userId,
					userName:this.userName,
					},
					// keep: true,
				})
				uni.navigateBack()
			},
			async getList() {
				const {
					rows,
					code,
					total
				} = await this.muajax.getJsServe({
					userIlk: 1,
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					serviceId:this.serviceId
				});
				if (code == 200) {
					rows.forEach(v=>{
						v.healthName=v.healthName?v.healthName.split(','):[v.healthName]
					})
					this.isLoading = false
					this.triggered = false;
					let number = this.pageNum * this.pageSize
					if (this.total >= number || this.pageNum == 1) {
						this.dataList = this.dataList.concat(rows)
						this.total = total
						this.hasNext = true
					} else {
						this.hasNext = false
					}
				}
			},
			
			select(e){
				console.log(e)
				this.userId= e.userId, 
				this.userName=e.nickName
				console.log(this.userName)
			},
			lower: function(e) {
				console.log('到底部拉')
				// console.log(e)
				if (!this.hasNext) {
					this.isMore = true
					return
				}
				this.pageNum++
				this.isLoading = true
				this.getList()
			},
			// 滚动监听
			scroll: function(e) {
				// console.log(e)
			},
			// 下拉被触发
			onPulling(e) {
				this.triggered = true
				this.getdata()
				this.scrollTop = 0
			},
			onRefresh() {
				setTimeout(() => {
					this.triggered = false;
				}, 3000)
			},
			goTop: function(e) {
			},
			click(item) {
				this.show = true
				console.log('item', item);
			},
			// 二级选择
			tWOChang() {
				this.show = false
			}
		}
	}
</script>

<style scoped lang="less">
	page {
		background: #f1f1f1;
		height: 100%;
	}
	.noInfo{
		text-align: center;
		color: #666;
	}

	.header {
		background: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		position: relative;
		// height: 200px;
		border-bottom: 1px solid #f1f1f1;
		position: relative;
		z-index: 99;
	}

	.technician-page {
		display: flex;
		flex-direction: column;
		height: 100%;
		overflow: hidden;

		.uv-list-box {
			overflow: hidden;
		}
	}

	.scroll-Y {
		height: 100%;
		overflow-y: scroll;
	}

	.two-class {
		position: absolute;
		top: 198rpx;
		background: #fff;
		display: flex;
		width: 100%;
		z-index: 999;
		padding: 20rpx;
		box-sizing: border-box;
		border-top: 1px solid #f1f1f1;

		.class-item {
			font-size: 24rpx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 42rpx;
			letter-spacing: 0rpx;
			color: #666666;
			margin-right: 20rpx;
			padding: 10rpx;
		}

		.itemActive {
			color: #60bcbb;
			border: 1px solid #60bcbb;

			border-radius: 10rpx;
		}

	}
	.footselect{
		height: 70rpx;
		line-height: 70rpx;
		background: #60bcbb;
		color: #fff;
		text-align: center;
	}
</style>